<template>
  <div class="views-jifenshangpin-web-detail" style="margin-top: 20px">
    <div>
      <e-container>
        <div class="hjl-titledianzi">
          <div class="">
            <h2>
              <span>详情</span>
            </h2>
          </div>
          <div class="section_content">
            <div class="">
              <div class="goods-info clearfix">
                <div class="gallery-list">
                  <e-shangpinban :images="map.shangpintupian"></e-shangpinban>
                </div>
                <div class="goods-right-content">
                  <h3 class="title" v-text="map.shangpinmingcheng"></h3>
                  <div class="descount">
                    <div>
                      <span class="name"> 所需积分： </span>
                      <span class="val"> {{ map.suoxujifen }} </span>
                    </div>
                    <div>
                      <span class="name"> 剩余数量： </span>
                      <span class="val"> {{ map.shengyushuliang }} </span>
                    </div>
                  </div>

                  <template  v-if="$session.cx == '用户'">


                                        <span v-if="$session.jifen >= map.suoxujifen">
                                        <el-button type="primary" :icon="Plus" size="" @click="$router.push('/duihuan/add?id='+map.id)">兑换</el-button>
                                          </span>
                    <span v-else style="color: red;font-size: 18px"> 积分不足</span>



                  </template>
                </div>
              </div>
              <div class="goods-content" v-html="map.xiangqingjieshao"></div>
            </div>
          </div>
        </div>
      </e-container>
    </div>
  </div>
</template>

<script setup>
import http from "@/utils/ajax/http";
import DB from "@/utils/db";
import EShangpinban from "@/components/shangpin/shangpinban.vue";

import { ref, reactive, watch, computed } from "vue";
import { useRoute } from "vue-router";
import { session } from "@/utils/utils";
import { extend } from "@/utils/extend";
import { useJifenshangpinFindById, canJifenshangpinFindById } from "@/module";

const route = useRoute();
const props = defineProps({
  id: {
    type: [Number, String],
  },
  isShowBtn: {
    type: Boolean,
    default: true,
  },
});

/**
 * 获取详情页面的一行数据,当url参数id变更时，当url参数id变更时，自动更新map中的数据
 * @type {EJifenshangpin}
 */
const map = useJifenshangpinFindById(props.id);
watch(
    () => props.id,
    (id) => {
      canJifenshangpinFindById(id).then((res) => {
        extend(map, res);
      });
    }
);
// end 获取详情页面的一行数据
</script>

<style scoped lang="scss">
.views-jifenshangpin-web-detail {
}
</style>
